<template>
  <div class="edit_container">
    <!--  新增时输入 -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      style="height:400px;"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    />
    <!-- 从数据库读取展示 -->
    <div class="ql-editor" v-html="str">
      {{ str }}
    </div>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: ``,
      str: '',
      editorOption: {}
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
    const content = '' // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content)
  },
  methods: {
    onEditorReady(editor) { // 准备编辑器

    },
    onEditorBlur() {
      this.$emit('getContent', this.content)
    }, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange({ html }) {
      this.content = html
      console.log(this.content)
    }, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    }
  }
}
</script>
